<template>
  <a-modal :open="true" :width="680" :title="modalTitle" @ok="handleOk">
    <a-form ref="formRef" :model="formState" :label-col="{ span: 6, offset: 0 }">
      <a-form-item
        v-for="item of computedItems"
        :key="item.dataIndex"
        :name="item.dataIndex"
        :label="item.title"
        :required="item.required"
      >
        <a-switch v-if="item.type === 'boolean'" v-model:checked="formState[item.dataIndex]" />
        <a-date-picker v-else-if="item.type === 'date'" v-model:value="formState[item.dataIndex]" allow-clear />
        <a-select
          v-else-if="item.type === 'enum'"
          v-model:value="formState[item.dataIndex]"
          allow-clear
          :options="item.options"
        />
        <a-input v-else v-model:value="formState[item.dataIndex]" />
      </a-form-item>
      <!-- <a-form-item label="Activity type">
        <a-checkbox-group v-model:value="formState.type">
          <a-checkbox value="1" name="type">Online</a-checkbox>
          <a-checkbox value="2" name="type">Promotion</a-checkbox>
          <a-checkbox value="3" name="type">Offline</a-checkbox>
        </a-checkbox-group>
      </a-form-item>
      <a-form-item label="Resources">
        <a-radio-group v-model:value="formState.resource">
          <a-radio value="1">Sponsor</a-radio>
          <a-radio value="2">Venue</a-radio>
        </a-radio-group>
      </a-form-item> -->
      <!-- <a-form-item label="备注">
        <a-textarea v-model:value="formState.desc" />
      </a-form-item> -->
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import type { FormInstance } from 'ant-design-vue';
import type { IColumn } from '@/types';
import { PAGE_TYPE } from '@/hooks/useTablePage';

type IFormState = Record<string, unknown>;

const props = defineProps({
  mode: { type: String as PropType<PAGE_TYPE>, required: true },
  items: { type: Array as PropType<IColumn[]>, default: () => [] },
  formData: { type: Object as PropType<IFormState>, default: () => ({}) },
  /**
   * 过滤表单项的方法，可以根据表单数据进行联动处理
   */
  filterFormItems: {
    type: Function as PropType<(cols: IColumn[], formState: IFormState) => IColumn[]>,
  },
});
const emit = defineEmits<{
  (e: 'ok', state: IFormState): void;
}>();

const getInitialState = (items: IColumn[]) => {
  const state: IFormState = {};
  items.forEach(item => {
    if (item.dataIndex === 'action' || item.readonly) {
      return;
    }

    switch (item.type) {
      case 'boolean':
        state[item.dataIndex] = item.defaultValue ?? false;
        break;
      default:
        state[item.dataIndex] = item.defaultValue ?? '';
        break;
    }
  });
  return state;
};

const formRef = ref<FormInstance>();
const modalTitle = computed(() => (props.mode === PAGE_TYPE.CREATING ? '新建' : '修改'));
const formState = reactive(getInitialState(props.items)) as IFormState;
const computedItems = computed(() => {
  const cols = props.items.filter(item => item.dataIndex !== 'action' && !item.readonly);
  if (props.filterFormItems) {
    return props.filterFormItems(cols, formState);
  }
  return cols;
});

onMounted(() => {
  Object.assign(formState, props.formData);
});

const handleOk = async () => {
  await formRef.value?.validate();
  emit('ok', formState);
};
</script>
